<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-refund">
			<!-- 头部 -->
			<view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">{{getStateText(refundData.state)}}</view>
						<view class="reason">
							<text class="reason-text">{{refundData.statetime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj" v-if="refundData.state != 4">
				{{getStateInfo(refundData.state)}}
			</view>
			<!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交退货,7=第三方退款中 -->
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 0">
				<view class="wanl-gray text-sm">
					<view>
						<text class="wlIcon-dot margin-right-sm"></text>
						{{$t('refundDetail-blocktitle-returnInfo-info1')}}
						<!-- 卖家同意或超时未处理，系统将自动确认 -->
					</view>
					<view class="margin-top-xs">
						<text class="wlIcon-dot margin-right-sm"></text>
						{{$t('refundDetail-blocktitle-returnInfo-info2')}}
						<!-- 如果退款被拒绝，您可以修改申请重新发起 -->
					</view>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black margin-lr-xs" @tap="closeRefund(refundData.id)">
						<!-- 关闭退款 -->
						{{$t('refundDetail-but-close')}}
						</button>
					<button class="cu-btn line-orange" @tap="editRefund(refundData.id)">
						<!-- 修改申请 -->
						{{$t('refundDetail-but-edit')}}
						</button>
				</view>
			</view>

			<view v-if="refundData.state == 1">
				<view class="bg-white solid-top padding-bj receipt">
					<view class="icon">
						<text class="wlIcon-guanzhu1"></text>
					</view>
					<view class="content">
						<view class="flex justify-between">
							<text>
								<!-- // 收件人 -->
								{{$t('refundDetail-blocktitle-returnName')}}：{{refundData.shopConfig.returnName}}
								</text><text>{{refundData.shopConfig.returnPhoneNum}}</text>
						</view>
						<view class="margin-top-xs">
							<view class="text-cut-2">
								{{refundData.shopConfig.returnAddr}}
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white padding-bj solid-top">
					<view class="wanl-gray text-sm">
						<view>
							<text class="wlIcon-dot margin-right-sm"></text>
							{{$t('refundDetail-blocktitle-returnName-info1')}}
							<!-- 请勿使用平邮或到付，以免商家无法收到退货 -->
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>
							{{$t('refundDetail-blocktitle-returnName-info2')}}
							<!-- 请填写真实快递信息，如超时则关闭退款 -->
						</view>
					</view>
				</view>
				<view class="cu-form-group margin-top-bj">
					<view class="title">{{$t('refundDetail-input-expressNo-title')}}：</view>
					<input :placeholder="$t('refundDetail-input-expressNo-placeholder')" name="input" v-model="returnData.express_no"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('refundDetail-input-expressName-title')}}：</view>
					<picker @change="kuaidiChange" :range="refundData.kuaidi" range-key="name">
						<view class="picker">
							{{kuaidiKey>-1?refundData.kuaidi[kuaidiKey].name: $t('refundDetail-input-expressName-placeholder')}}
						</view>
					</picker>
				</view>
				<view class="bg-white padding-bj current">
					<view class="flex justify-end">
						<button class="cu-btn line-orange margin-lr-xs" @tap="toExpress(refundData.id)">确认退货</button>
					</view>
				</view>
			</view>
			<view class="bg-white current" v-if="refundData.state == 6">
				<view class="bg-white solid-top padding-bj">
					<!-- 退货物流 -->
					{{$t('refundDetail-blocktitle-refundExpress')}}：<text class="wanl-gray">{{refundData.express_name}}({{refundData.express_no}})</text>
				</view>
				<view class="bg-white solid-top padding-bj current">
					<view class="wanl-gray text-sm">
						<view>
							<text class="wlIcon-dot margin-right-sm"></text>
							{{$t('refundDetail-blocktitle-refundExpress-info1')}}
							
							<!-- 如果退款被拒绝，您可以修改申请重新发起 -->
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>
							{{$t('refundDetail-blocktitle-refundExpress-info2')}}
							<!-- 卖家超时未处理，系统将自动确认 -->
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white solid-top padding-bj current " v-if="refundData.state == 2">
				<view class="text-sm">
					<!-- 拒绝理由 -->
					{{$t('refundDetail-blocktitle-refundContent')}}：<text class="wanl-gray">{{refundData.refuse_content}}</text>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black" @tap="arbitrationRefund(refundData.id)">平台介入</button>
					<button class="cu-btn line-orange margin-left-xs" @tap="editRefund(refundData.id)">修改申请</button>
				</view>
			</view>
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 3">
				<view class="wanl-gray text-sm">
					<view>
						<text class="wlIcon-dot margin-right-sm"></text>
						{{$t('refundDetail-blocktitle-refundState1')}}
						<!-- 客服正在审核退款详情及退款历史记录 -->
					</view>
					<view class="margin-top-xs">
						<text class="wlIcon-dot margin-right-sm"></text>
						{{$t('refundDetail-blocktitle-refundState2')}}
						<!-- 大概1-3个工作日做出答复，请耐心等待 -->
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj flex justify-between align-center" v-if="refundData.state == 4">
				<text>
					{{$t('refundDetail-blocktitle-refundTotal')}} 
					<!-- 退款总金额 -->
					</text><text class="text-price wanl-orange">{{refundData.price}}</text>
			</view>
			<view class="bg-white padding-bj margin-top-bj flex justify-between align-center"
				@tap="refundLog(refundData.id)">
				<text>
					{{$t('refundDetail-blocktitle-refundHistory')}} 
					<!-- 退款历史 -->
					</text><text class="wlIcon-fanhui2"></text>
			</view>
			<view class="bg-white padding-bj margin-top-bj">
				{{$t('refundDetail-blocktitle-refundDetail')}} 
				<!-- 退款详情 -->
			</view>
			<view class="padding-bj flex">
				<view class="cu-avatar xl margin-right-bj"
					:style="{backgroundImage: 'url('+$wanlshop.oss(refundData.goods.image, 70, 70)+')'}"> </view>
				<view class="text-sm" style="width: calc(100% - 128rpx);">
					<view class="margin-bottom-xs">

						<view class="text-cut-2">
							<view v-if="refundData.order_type === 'groups'"
								class="cu-tag sm margin-right-xs bg-gradual-orange radius">
								<text> {{$t('refundDetail-info-prompt-ptxx')}} <!-- 拼团订单 --></text>
							</view>
							{{refundData.goods.title}}
						</view>
					</view>
					<view class="wanl-gray">
						{{$t('refundDetail-info-prompt-spu')}}<!-- 规格 -->：{{refundData.goods.difference}}
					</view>
				</view>
			</view>
			<view class="bg-white padding-bj text-sm">
				<view class="item flex">
					<text class="wanl-gray"> {{$t('refundDetail-celltitle-refundType')}}： </text> <text> {{refundData.type_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> {{$t('refundDetail-celltitle-refundreason')}}： </text> <text> {{refundData.reason_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> {{$t('refundDetail-celltitle-refundprice')}}： </text> <text class="text-price"> {{refundData.price}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> {{$t('refundDetail-celltitle-refundexpress')}}： </text> <text> {{refundData.expressType_text}} </text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray"> {{$t('refundDetail-celltitle-refundTime')}}： </text> <text> {{refundData.createtime_text}} </text>
				</view>
			</view>
			<view class="edgeInsetBottom"> </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refundData: {
					statetime: '',
					goods: {

					}
				},
				returnData: {
					id: 0,
					express_no: '',
					express_name: ''
				},
				kuaidiKey: -1
			};
		},
		onLoad(option) {
			this.loadData({
				id: option.id
			});
		},
		onBackPress(options) {
			// 1.1.6升级
			if (this.$wanlshop.prePage().route == 'pages/user/refund/apply') {
				this.$wanlshop.on('/pages/user');
				return true;
			}
		},
		methods: {
			async loadData(data) {
				await uni.request({
					url: '/wanlshop/refund/getRefundInfo',
					data: data,
					success: res => {
						this.refundData = res.data;
						this.returnData.id = res.data.id;
						// 时间差的毫秒数 
						if (res.data.state == 0) {
							var diff = (res.data.createtime + res.data.config.autoagree * 86400) - Date
								.parse(new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = this.$t('refundDetail-statetime-6-1', {minutes})
								 //'还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = this.$t('refundDetail-statetime-6-2', {hours,minutes}) 
								//'还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime =this.$t('refundDetail-statetime-6-2', {days, hours,minutes})
								// '还剩' + days + '天' + hours + '小时' + minutes +
									//'分';
							}
						} else if (res.data.state == 1) {
							var diff = (res.data.agreetime + res.data.config.returntime * 86400) - Date
								.parse(new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime =this.$t('refundDetail-statetime-6-1', {minutes})
								 // '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = this.$t('refundDetail-statetime-6-2', {hours,minutes}) 
								//'还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = this.$t('refundDetail-statetime-6-2', {days, hours,minutes})
								//'还剩' + days + '天' + hours + '小时' + minutes + '分';
							}
						} else if (res.data.state == 2) {
							this.refundData.statetime = res.data.rejecttime_text;
						} else if (res.data.state == 6) {
							var diff = (res.data.returntime + res.data.config.receivingtime * 86400) - Date
								.parse(new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = this.$t('refundDetail-statetime-6-1', {minutes})
								//'还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = this.$t('refundDetail-statetime-6-2', {hours,minutes}) 
								// '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime =this.$t('refundDetail-statetime-6-2', {days, hours,minutes})
								 // '还剩' + days + '天' + hours + '小时' + minutes +
									// '分';
							}
						} else if (res.data.state == 3) {
							this.refundData.statetime = this.$t('refundDetail-statetime-3'); // '等待平台处理';
						} else if (res.data.state == 4) {
							this.refundData.statetime = res.data.completetime_text;
						} else if (res.data.state == 5) {
							this.refundData.statetime = res.data.closingtime_text;
							// 1.1.6升级
						} else if (res.data.state == 7) {
							this.refundData.statetime = this.$t('refundDetail-statetime-7'); // '预计24小时内原路返还';
						} else if (res.data.state == 8) {
							this.refundData.statetime = this.$t('refundDetail-statetime-8'); // '请联系平台客服处理';
						}
					}
				});
			},
			getStateText(state) {
				return [
					this.$t('refundDetail-stateText-ddmjty'),
					this.$t('refundDetail-stateText-ddmjth'),
					this.$t('refundDetail-stateText-ddmjtk'),
					this.$t('refundDetail-stateText-ptjr'),
					this.$t('refundDetail-stateText-tkwc'),
					this.$t('refundDetail-stateText-tkgb'),
					this.$t('refundDetail-stateText-ddmjqh'),
					this.$t('refundDetail-stateText-tkz'),
					this.$t('refundDetail-stateText-tksb'),
					// "等待卖家同意",
					// "等待买家退货",
					// "卖家拒绝退款",
					// "平台介入",
					// "退款完成",
					// "退款关闭",
					// "等待卖家收取退货",
					// "第三方支付退款中",
					// "退款失败"
				][state];
			},
			getStateInfo(state) {
				return [
					this.$t('refundDetail-StateInfo-fqtkmjty'),
					this.$t('refundDetail-StateInfo-mjtyth'),
					this.$t('refundDetail-StateInfo-xgthsq'),
					this.$t('refundDetail-StateInfo-ptjr'),
					this.$t('refundDetail-StateInfo-wctk'),
					this.$t('refundDetail-StateInfo-gbtk'),
					this.$t('refundDetail-StateInfo-dmjsh'),
					this.$t('refundDetail-StateInfo-tkz'),
					this.$t('refundDetail-StateInfo-tksb'),
					// "您已成功发起退款，等待卖家同意",
					// "您发起的退款卖家已同意，请退货",
					// "您可以修改退货申请再次发起",
					// "您已申请平台介入，请等待平台对此判定",
					// "退款完成",
					//  "您已关闭本次退款申请",
					// "如果商家确认收到货物，并核查没有问题，将退款给您",
					// "因第三方快捷支付订单，退款将在24小时内原路返还",
					// "快捷支付退款失败，请联系商家",
				][state];
			},
			kuaidiChange(e) {
				this.kuaidiKey = e.detail.value;
				this.returnData.express_name = this.refundData.kuaidi[e.detail.value].code;
			},
			// 退款历史
			refundLog(id) {
				this.$wanlshop.to(`/pages/user/refund/log?id=${id}`);
			},
			// 平台介入
			async arbitrationRefund(id) {
				await uni.request({
					url: '/wanlshop/refund/arbitrationRefund',
					data: {
						id: id
					},
					success: res => {
						this.loadData({
							id: id
						});
					}
				});
			},
			// 关闭退款
			async closeRefund(id) {
				await uni.request({
					url: '/wanlshop/refund/closeRefund',
					data: {
						id: id
					},
					success: res => {
						this.$store.commit('statistics/order', {
							customer: this.$store.state.statistics.order.customer - 1
						});
						this.loadData({
							id: id
						});
					}
				});
			},
			// 提交物流
			async toExpress() {
				if (!this.returnData.express_no) {
					this.$wanlshop.msg(this.$t('refundDetail-txpressToast-express_no'));
					return false;
				}
				if (!this.returnData.express_name) {
					this.$wanlshop.msg(this.$t('refundDetail-txpressToast-express_name'));
					return false;
				}
				await uni.request({
					url: '/wanlshop/refund/toExpress',
					method: 'POST',
					data: this.returnData,
					success: res => {
						this.loadData({
							id: res.data
						});
					}
				});
			},
			// 修改退款
			editRefund(id) {
				this.$wanlshop.to(`/pages/user/refund/edit?id=${id}`);
			}

		}
	};
</script>

<style>
	.wanl-refund .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}

	.wanl-refund .header .img-bg {
		width: 100%;
		height: 180rpx;
	}

	.wanl-refund .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.wanl-refund .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.wanl-refund .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.wanl-refund .header .reason-text {
		padding-right: 12rpx;
	}

	.wanl-refund .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.wanl-refund .current .cu-btn {
		width: 140rpx;
		font-size: 26rpx;
		padding: 0 12rpx;
	}

	.wanl-refund .receipt {
		display: flex;
		align-items: center;
	}

	.wanl-refund .receipt .icon {
		margin-right: 25rpx;
		font-weight: bold;
	}

	.wanl-refund .receipt .content {
		flex: 1;
	}

	.wanl-refund .cu-form-group .title {
		padding-right: 25rpx;
		font-size: 28rpx;
		height: 55rpx;
		line-height: 55rpx;
	}

	.wanl-refund .cu-form-group input {
		font-size: 28rpx;
		color: #555;
		padding-right: 10rpx;
	}
</style>